<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <el-radio v-model="radio" label="1">备选项</el-radio>
    <el-radio v-model="radio" label="2">备选项</el-radio>
    <br>
    <router-link to="/hello">go to hello</router-link>
    <br>
    <el-button v-on:click="doClick">show alert</el-button>
    <el-button @click="doClick2">go to hello</el-button>
    <el-button @click="doClick3">go to hello2</el-button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Hello sunny!',
      radio: '1',
      name: 'Hello Mr. Su'
    }
  },
  methods: {
    doClick: function (event) {
      // alert('hello')
      this.$alert('<b>1. 人才币的获得？</b><p>企业在各自后台“分享简历”中上传一条求职者简历信息，审核通过后即可获得相应数量的人才币。</p><b>2. 人才币的使用？</b><p>人才币是1688jobs人才云聘中用于下载简历，使用面试申请，代理招聘等功能的虚拟货币。</p>', '人才币说明', {
        dangerouslyUseHTMLString: true
      })
    },
    doClick2: function (event) {
      this.$router.push({path: '/hello'})
    },
    doClick3: function (event) {
      this.$router.push({path: '/hello/' + this.name})
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
